{% extends "layout.html" %}
{% block content %}
<div class="x-nav">
    <div class="layui-col-md3">
        <button class="layui-btn" onclick="x_admin_show('添加数据绑定','data_bind-edit.html',900,450)"><i
                class="layui-icon"></i>添加数据绑定
        </button>
    </div>
    <div class="layui-col-md3">
        <button class="layui-btn" id="upload_dataBind_table"><i class="layui-icon"></i>导入绑定表</button>
        <button class="layui-btn" id="download_template"
                onclick="javascript:window.open('../dataBind_templet.xls')">下载模板
        </button>
    </div>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body layui-anim layui-anim-up">
    <div class="layui-fluid">
        <table id="data_bind_list" class="layui-table" lay-filter="channel"></table>
    </div>
    <script type="text/html" id="channelBar">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-sm"lay-event="del"><i class="layui-icon">&#xe640;</i></button>
        </div>
    </script>
</div>
<style>
    .layui-fluid {
        position: relative;
        margin: 0 auto;
        padding: 0;
    }
    .x-body {
        padding: 0 20px;
    }
</style>
<script>
    var start, end, channelTitle;
    var channel_id = GetQueryString('channel_id');
    var data_bind_id = GetQueryString('data_bind_id');
    $(function () {
        layui.use(['table', 'form', 'upload'], function () {
            var table = layui.table;
            var upload = layui.upload;
            var layer = layui.layer;
            $ = layui.jquery;
            let channelInfo;
            $.ajax({
                url: "getChannelInfo",
                type: "POST",
                dataType: "json",
                success: function (data) {
                    channelInfo = data;
                }
            });

            table.render({
                elem: '#data_bind_list'
                , height: 'full-70'
                , url: './data_bind_list'
                , cols: [[
                    {title: 'ID', field: 'data_bind_id', align: 'center', sort: true, width: 100}
                    ,{title: '通道ID', field: 'channel_id', align: 'center', width: 100}
                    , {title: '标题', field: 'title', align: 'center', width: 200}
                    , {title: '标签', field: 'label', align: 'center', width: 200}
                    , {title: '地址', field: 'address', align: 'center', width: 200}
                    , {title: '值', field: 'value', align: 'center', width: 200}
                    , {title: '操作', fixed: 'right', align: 'center', toolbar: '#channelBar'}
                ]]
                , page: true
                ,limit :100
                ,limits: [100,200,500,1000]
            });
            //监听工具条
            table.on('tool(channel)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        x_admin_show('编辑数据绑定', 'data_bind-edit.html?data_bind_id=' + obj.data.data_bind_id, 900, 450);
                        break;
                    case 'del':
                        layer.confirm('确认删除？', function(index){
                            // console.log(obj.data);
                            data={'data_bind_id':obj.data.data_bind_id};
                            $.ajax({
                                url:'del_data_bind',
                                type:'POST',
                                data:data,
                                success:function(data){
                                    // console.log(data);
                                    if(data.code==0)obj.del();
                                }
                            });
                            obj.del();
                            layer.close(index);
                        });
                        break;
                    default:
                }
            });
            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_dataBind_table' //绑定元素
                ,accept:'file'
                ,exts:'xls|xlsx'
                ,acceptMime:'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                ,url: 'upload_dataBind_table' //上传接口
                ,data:{
                    channel_id:channel_id
                }
                ,field:'upload_file'
                ,done: function(res){
                    //上传完毕回调
                    if(res.code == 0){
                        layer.alert("导入成功-"+res.msg, {icon: 6},function () {
                            location.reload();
                        });
                    }else{
                        layer.alert("导入失败！"+res.msg, {icon: 6});
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.alert("导入失败！请检查表格内容", {icon: 6});
                }
            });
            table.on('toolbar(channel)', function (obj) {
                if (obj.event === 'import') {
                    // 打开文件选择框
                    uploadInst.upload();
                }
            });
        });
    })
</script>
{% endblock %}